<template>
  <view>
    <!-- 请求日志按钮 -->
    <view class="request-logger-button" :class="{'environment':props.h5Show}" @tap="toggleVisibility">
      <view class="request-logger-button__icon">
        <view class="request-logger-button__icon-line" />
        <view class="request-logger-button__icon-line" />
        <view class="request-logger-button__icon-line" />
      </view>
    </view>
    <!-- 请求日志浮窗 -->
    <view v-if="isLoggerVisible" class="request-logger" :class="{ 'minimized': isLoggerMinimized }">
      <!-- 标题栏 -->
      <view class="request-logger__header">
        <text class="request-logger__title">
          请求监控
        </text>
        <view class="request-logger__actions">
          <text class="request-logger__action" @tap="clearLogs">
            清空
          </text>
          <text class="request-logger__action" @tap="toggleMinimize">
            {{ isLoggerMinimized ? '展开' : '最小化' }}
          </text>
          <text class="request-logger__action" @tap="toggleVisibility">
            关闭
          </text>
        </view>
      </view>
      
      <!-- 日志内容区 -->
      <scroll-view v-if="!isLoggerMinimized" class="request-logger__content" scroll-y>
        <view 
          v-for="(log, index) in requestLogs" 
          :key="log.id" 
          class="request-logger__log-item"
          :class="{ 'success': log.status === 'success', 'failed': log.status === 'failed' }"
          @tap="expandedLogIndex = expandedLogIndex === index ? -1 : index"
        >
          <view class="request-logger__log-header">
            <text class="request-logger__log-method">
              {{ log.method }}
            </text>
            <text class="request-logger__log-url">
              {{ log.url }}
            </text>
            <text class="request-logger__log-status">
              {{ log.status }}
            </text>
            <text class="request-logger__log-time">
              {{ log.timestamp }}
            </text>
          </view>
          
          <view v-if="expandedLogIndex === index" class="request-logger__log-detail">
            <view class="request-logger__log-section">
              <text class="request-logger__log-section-title">
                请求参数:
              </text>
              <text class="request-logger__log-section-content">
                {{ formatData(log.requestData) }}
              </text>
            </view>
            
            <view v-if="log.status === 'success'" class="request-logger__log-section">
              <text class="request-logger__log-section-title">
                响应数据:
              </text>
              <text class="request-logger__log-section-content">
                {{ formatData(log.responseData) }}
              </text>
            </view>
            
            <view v-if="log.status === 'failed'" class="request-logger__log-section">
              <text class="request-logger__log-section-title">
                错误信息:
              </text>
              <text class="request-logger__log-section-content">
                {{ log.error }}
              </text>
            </view>
            
            <view class="request-logger__log-section">
              <text class="request-logger__log-section-title">
                耗时:
              </text>
              <text class="request-logger__log-section-content">
                {{ log.duration }}ms
              </text>
            </view>
          </view>
        </view>
        
        <view v-if="requestLogs.length === 0" class="request-logger__empty">
          <text>暂无请求日志</text>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script setup>
  import { ref, onMounted } from 'vue';
  import { useRequestLogger } from './useRequestLogger';
  import './styles/index.css';

  const props = defineProps({
    h5Show: {
      type: Boolean,
      default: false,
    },
    enabled: {
      type: Boolean,
      default: true, // 非生产环境默认启用
    },
    show: {
      type: Boolean,
      default: false,
    },
    environment: {
      type: Array,
      default: () => ['xhr'],
      validator: (value) => value.some(item => ['xhr', 'fetch', 'uni'].includes(item))
    }
  });

  const expandedLogIndex = ref(-1);
  const {
    requestLogs,
    isLoggerMinimized,
    isLoggerVisible,
    clearLogs,
    toggleMinimize,
    toggleVisibility,
    formatData,
    initRequestInterceptor
  } = useRequestLogger({
    environments: props.environment,
    show: props.show
  });

  // 组件挂载时初始化请求拦截器
  onMounted(() => {
    if (props.enabled) {
      initRequestInterceptor();
    }
  });
</script>
<style>
  .environment{
    width: 30px;
    height: 30px;
  }
</style>